<template>
    <div class="header">
        <div class="left">
            <!--            <div class="logo" :style="logoStyle" @click.stop="$router.push('/')"></div>-->
            <img :src="require('@/assets/img/logo.png')" @click.stop="$router.push('/')" class="logo">
            <div class="routerWapper">
                <router-link v-for="item in titleList" :key="item.id" :to="item.to" class="routeritem"
                             @mouseover="hoverWork(item)">
                    {{item.title}}
                </router-link>
            </div>

        </div>


        <div class="dropdown1_wapper" ref="dropdown1_wapper" @mouseleave="leaveWork1" @mouseenter="enterwork1" v-if="dropShow" >
            <div class="left_warpper">

                <div v-for="item1 in typeList"
                     :key="item1.creationTypeModel.id"
                     class="dropdown1_item"
                     ref="dropdown1_item"
                     @mouseover="overwork(item1)"
                     @mouseout="outwork(item1)">
                    <i class="iconfont icon-shoucangjia type_icon"></i>
                    <span class="dropdown1_item_text">{{item1.creationTypeModel.creationTypeName}}</span>
                    <i class="iconfont icon-right left_icon"></i>
                </div>

                <div class="allWork" @click="toDspAll">
                    所有剧本
                </div>

            </div>
            <div class="right_wapper">
                <div class="dropdown1_item_right" v-for="item2 in erjiList" :key="item2.id" @click.stop="toDsp(item2)">
                    {{item2.creationTypeName}}
                </div>
            </div>
        </div>


        <div class="right">

            <div class="search-input">
                <el-input
                        v-model="searchValue"
                        placeholder="大家都在搜..."
                        class="input-with-select">
                </el-input>
                <i class="iconfont icon-sousuo myicon"></i>
            </div>

            <div class="login_and_regist" v-if="myUserInfo == undefined">
                <span @click.stop="login(true)">登录</span> <span>|</span> <span @click.stop="login(false)">注册</span>
            </div>

            <div v-else class="avtor_and_name">
                <el-dropdown>

                    <!--                    <div>-->
                    <!--                        <el-avatar :size="30" :src="userAvatar">-->
                    <!--                            <img src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto"/>-->
                    <!--                        </el-avatar>-->
                    <!--                    </div>-->

                    <div class="avtor_and_name_wapper">
                        <img v-if="( userInfo == {} ) || (userInfo.userAvatar == null)" class="touxiang"
                             src="https://img2.baidu.com/it/u=3666548066,2508071679&fm=26&fmt=auto">
                        <img v-else :src="userAvatar" class="touxiang">

                        <div class="name">{{username}}</div>

                    </div>

                    <template #dropdown>
                        <el-dropdown-menu>

                            <el-dropdown-item @click="$router.push('/my')">
                                我的
                            </el-dropdown-item>

                            <el-dropdown-item @click="$router.push('/personalCenter')">
                                <!--                  <router-link :to="{ name: 'personalCenter' }">个人中心</router-link>-->
                                个人中心
                            </el-dropdown-item>

                            <el-dropdown-item @click="$router.push('/creation')">
                                创作管理
                            </el-dropdown-item>

                            <el-dropdown-item @click="userToAuthor" v-if="userInfo.status != 2">
                                成为作者
                            </el-dropdown-item>

                            <el-dropdown-item @click="bindCard"
                                              v-if=" (userInfo.userCard == undefined) || (userInfo.userCard == null) ">
                                绑定银行卡
                            </el-dropdown-item>

                            <el-dropdown-item @click="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>

                </el-dropdown>
            </div>

        </div>

        <Login ref="login" :islogin="islogin" class="hiddenItem"></Login>
        <Author ref="author" class="hiddenItem"></Author>
        <Bindcard ref="bindCard" class="hiddenItem"></Bindcard>
    </div>
</template>

<script>
    import Login from "./login.vue";
    import Author from "./author.vue";
    import Bindcard from "./bindCard.vue";
    import {getUserInfo, removeUserInfo} from "../../utils/auth";
    import {Logout} from "@/api/UserInfo"
    import baseConfig from "@/utils/config"
    import {IndexCreationTypeListByTypeId} from "../../api/ScriptWriting";

    export default {
        name: "header2",
        components: {
            Login,
            Author,
            Bindcard,
        },
        data() {
            return {

                islogin: true,

                myUserInfo: undefined,

                logoStyle: {
                    background: 'url(' + require("@/assets/img/logo.png") + ")",
                    backgroundSize: '100% 100%',
                    backgroundRepeat: 'no-repeat',
                },

                titleList: [
                    {
                        id: 1,
                        title: '所有作品',
                        to: {path: '/'},
                    },
                    {
                        id: 2,
                        title: '版权保护',
                        to: {path: '/copyright'},
                    },
                    {
                        id: 3,
                        title: '行业新闻',
                        to: {path: '/industry'}
                    },
                    {
                        id: 4,
                        title: '关于我们',
                        to: {path: '/about'},
                    },
                ],

                isLogin: true,

                isToAuthor: false,

                searchValue: '',

                typeList: [],
                erjiList:[],

                mousemove: undefined,

                dropShow:false,

            }
        },
        created() {
            this.myUserInfo = getUserInfo()
            IndexCreationTypeListByTypeId({typeId: 1}).then(res => {
                if (res.code == 0) {
                    this.typeList = res.data
                    console.log('类型列表',this.typeList)
                }
            })
        },
        computed: {
            userAvatar() {
                return baseConfig.dev + this.$store.state.userInfo.userAvatar
            },
            userInfo() {
                return this.$store.state.userInfo
            },
            username() {

                if (this.userInfo.userName == null || this.userInfo.userName == '') {
                    return ''
                } else {
                    return this.userInfo.userName.slice(0, 8)
                }
            }
        },

        methods: {
            logout() {
                this.userInfo = {};
                Logout().then((res) => {
                })
                removeUserInfo();
                this.myUserInfo = undefined
                this.$store.commit('setUser', {})
                this.$router.push({path: "/"});
            },
            login(login_or_register) {
                this.islogin = login_or_register;
                this.$refs.login.dialogVisible = true;
                this.$refs.login.FindpassWord = false;
                this.$refs.login.FindpassWordCheck = true;
            },
            userToAuthor() {

                if (getUserInfo()) {
                    this.$refs.author.dialogVisible = true;
                } else {
                    ElMessage({
                        message: '请先登录',
                        type: 'warning',
                    })
                }


            },
            bindCard() {
                if (this.userInfo.status != 2) {
                    this.$message.warning('请先成为作者哦')
                } else {
                    this.$refs.bindCard.dialogVisible = true
                    console.log(this.$refs.bindCard.dialogVisible)
                    console.log("aaaaaaaaa")
                }

            },
            hoverWork(item) {

                switch (item.id) {

                    case 1:

                        this.dropShow=true

                        break;

                }

            },

            leaveWork1(){
                this.dropShow=false
            },
            enterwork1(){
                this.dropShow=true
            },

            overwork(item){
                this.erjiList=item.creationTypeModels;
            },

            outwork(item){

            },

            toDsp(item){

                this.$router.push({path:'/dsp/dspJuBen',query:{typeid:item.id}})

            },
            toDspAll(){
                this.$router.push('/dsp/dspJuBen')
            }

        }
    }
</script>

<style scoped lang="scss">
    .header {
        width: 100%;
        height: 70px;
        background: #ffffff;
        position: sticky;
        top: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 999;

        .left {
            margin-left: 160px;
            display: flex;
            align-items: center;

            .logo {
                width: 146px;
                height: 48px;
                object-fit: fill;
                overflow: hidden;
                cursor: pointer;
            }

            .routerWapper {
                margin-left: 40px;

                .routeritem {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 14px;
                    opacity: 1;
                    margin-left: 50px;

                    ::v-deep {
                        &.router-link-active {
                            color: #2EB0C6;
                        }
                    }
                }
            }

        }


        .dropdown1_wapper {
            padding-top: 10px;
            position: fixed;
            width: 540px;
            min-height: 0px;
            background: #ffffff;
            top: 70px;
            left: 380px;
            display: flex;
            border-radius: 5px;

            .left_warpper{
                width: 50%;
                .dropdown1_item {

                    height: 32px;
                    font-size: 14px;
                    line-height: 32px;
                    cursor: default;


                    position: relative;
                    .type_icon{
                        position: absolute;
                        left: 18px;
                        color: orange;
                    }
                    .dropdown1_item_text{
                        position: absolute;
                        left: 60px;
                    }
                    .left_icon{
                        position: absolute;
                        right: 15px;
                    }
                }
                .dropdown1_item:hover{
                    background: #f2f3f5;
                    color: #cdb52f;
                }

                .allWork{
                    width: 100%;
                    height: 58px;
                    font-size: 14px;
                    line-height: 58px;
                    cursor: pointer;
                    text-indent: 60px;
                    border-top: 1px solid #f5f5f5;
                }
                .allWork:hover{
                    color: #cdb52f;
                }

            }

            .right_wapper{
                width: 50%;
                border-left: 1px solid #f2f3f5;
                padding-left: 15px;
                .dropdown1_item_right{
                    height: 32px;
                    font-size: 14px;
                    line-height: 32px;
                    cursor: pointer;
                }

                .dropdown1_item_right:hover{
                    background: #f2f3f5;
                    color: #cdb52f;
                }

            }

        }


        .right {
            display: flex;

            .search-input {
                width: 529px;
                position: relative;
                margin-right: 60px;

                ::v-deep {
                    .el-input__inner {
                        border-radius: 22px;
                    }
                }

                .myicon {
                    position: absolute;
                    right: 16px;
                    top: 13px;
                    cursor: pointer;
                }
            }

            .login_and_regist {
                display: flex;
                align-items: center;
                margin-right: 160px;

                span {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    opacity: 1;
                    cursor: pointer;
                    margin-right: 14px;
                }

                span:nth-child(3) {
                    margin-right: 0px;
                }
            }

            .avtor_and_name {
                margin-right: 180px;

                /deep/ .el-dropdown {
                    cursor: default;
                    height: 100%;
                    display: flex;
                    align-items: center;

                    .avtor_and_name_wapper {
                        display: flex;
                        align-items: center;

                        .touxiang {
                            width: 28px;
                            height: 28px;
                            object-fit: fill;
                            border-radius: 50%;
                            margin-right: 7px;
                        }

                        .name {
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #333333;
                        }
                    }
                }


            }
        }

        .hiddenItem {
            position: fixed;
        }

    }
</style>
